<template>
  <div>
    <el-upload
      :multiple="false"
      :action="actionUrlP"
      :headers="headers"
      :on-success="onSuccess"
      :before-upload="onBeforeUpload"
      :show-file-list="false"
      :on-change="handleOnChange"
      :on-progress="onProgress"
      ref="upload"
      v-show="false"
    ></el-upload>
    <div class="l-flex--row wrapper stretch">
      <div class="files l-flex__fill">
        <el-tag
          :key="index"
          v-for="(tag, index) in fileList"
          :closable="editMode !== 'detail'"
          style="margin-right: 10px"
          :disable-transitions="false"
          @close="handleClose(index)"
        >
          <span>
            <span class="u-pointer" @click="handleDownload(tag)">
              {{ tag.name }}
            </span>
            <i
              style="marginleft: 2em"
              class="el-icon-download u-pointer"
              @click.stop="handleDownload(tag, true)"
            ></i>
          </span>
        </el-tag>
      </div>
      <el-progress
        class="l-flex__self l-flex--row"
        type="circle"
        style="display: flex"
        :percentage="percentage"
        status="success"
        :width="30"
        v-if="loading"
      ></el-progress>
      <div class="l-flex--row c-button center" v-if="editMode !== 'detail'">
        <el-button
          :loading="loading"
          class="l-flex__self"
          type="text"
          @click="onUploadClick"
        >
          上传
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth';
import { basePath } from '@/utils/request';
import Download from '@/views/_mixins/download';
export default {
  name: 'UploadFormItem',
  mixins: [Download],
  props: {
    editMode: {
      type: String,
      default: 'edit'
    },
    value: {},
    beforeUpload: {
      type: Function,
      default: () => {}
    },
    actionUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      filePath,
      loading: false,
      percentage: 0
    };
  },
  computed: {
    actionUrlP() {
      return basePath + this.actionUrl;
    },
    headers() {
      let token = getToken();
      return token ? { Authorization: token } : {};
    },
    fileList() {
      if (!this.value) return [];
      return this.value.split(',').map(i => {
        return { name: i.split('|')[1], fileUrl: i.split('|')[0] };
      });
    }
  },
  methods: {
    getFileStr(list) {
      return list
        .reduce((acc, cur) => {
          return `${acc},${cur.fileUrl}|${cur.name}`;
        }, '')
        .slice(1);
    },
    handleClose(index) {
      let arr = this.fileList;
      arr.splice(index, 1);
      this.$emit('input', this.getFileStr(arr));
    },
    onSuccess({ fileUrl, name }, file, fileList) {
      name = name.replaceAll('|', '');
      name = name.replaceAll(',', '');
      this.$emit(
        'input',
        this.getFileStr(
          this.fileList.concat({
            fileUrl,
            name
          })
        )
      );
    },
    onBeforeUpload(file) {
      const valid = this.beforeUpload(file);
      if (valid === false) {
        this.loading = false;
        this.percentage = 0;
        return false;
      }
    },
    handleOnChange(file, fileList) {
      this.loading = true;
      if (file.percentage == 100) {
        this.loading = false;
        this.percentage = 0;
      }
    },
    onProgress(file) {
      this.percentage = file.percent;
    },
    onUploadClick() {
      this.$refs.upload.$el.querySelector('input').click();
    },
    handleDownload({ fileUrl: url, name }, download = false) {
      if (download) {
        this.downloadFile(url, name, null, true, false);
        return;
      }
      window.open(this.filePath + url);
      // const eleLink = document.createElement('a');
      // eleLink.style.display = 'none';
      // eleLink.href = this.filePath + url;
      // eleLink.download = false;
      // eleLink.target = '_blank';
      // document.body.appendChild(eleLink);
      // eleLink.click();
      // document.body.removeChild(eleLink);
    }
  }
};
</script>
<style lang="scss" scoped>
.wrapper {
  min-height: 32px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
}
.c-button {
  width: 70px;
  border-left: 1px solid #dcdfe6 !important;
  margin-left: 10px;
  border-radius: 4px;
  background: #eee;
}
.files {
  padding: 5px 10px;
  min-height: 45px;
}
</style>
